import React from 'react';
import { connect } from 'react-redux';
import { Tabs, Row, Col, notification, message } from 'antd';
import * as loginAction from '../../actions/login';
import Person from './persion';
import Company from './company';
import './style.less';

class SignUp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            getCaptcha: null
        }
    }
    componentDidMount() {
        this.getCaptcha();
    }
    // 表单校验规则
    formCheckRules = {
        //大小写字母开头包含字母数字下划线 和'-'0次或多次，共5到15位
        //汉字开头，包含字母数字下划线 和'-'0次或多次 和 汉字，共3到8位
        userNameReg: /^[a-zA-Z]{1}([\w-*]){4,14}|(^[\u4E00-\uFA29]{1}[\w-*\u4E00-\uFA29]{2,7})$/,

        //字母数字下划线 或 特殊字符，共6到16位
        passwordReg: /^(\w|\w*[~!@#$%^&*()+`\\\-={}:";'<>?,./|]){6,16}$/,

        //part1:字母数字下划线 和 '-'0次或多次，和'.'领0次或多次   共一次或多次
        //part2:@
        //part3:字母数字下划线 和 '-'0次或一次，共一次或多次
        //part4:'.' 和 字母数字下划线，共大于等于2次
        emailReg: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,

        //1开头，共11位
        phoneNumberReg: /^1\d{10}$/,

        //区号+号码，区号以0开头，3位或4位
        //号码由7位或8位数字组成
        //区号与号码之间可以无连接符，也可以“-”连接
        telNumberReg: /^0\d{2,3}-?\d{7,8}$/,

        //大小写字母，数字，共4位
        codeReg: /^[A-Za-z0-9]{4}$/i,
    }
    // 验证码
    getCaptcha = () => {
        // eslint-disable-next-line
        this.setState({
            getCaptcha: null,
        });
        // eslint-disable-next-line
        this.props.dispatch(loginAction.getCaptcha(Date.now())).then((res) => {
            this.setState({
                getCaptcha: 'data:image/jpeg;base64,' + res.slice(1, -1),
            });
        });
    }
    // 注册
    register = (key, data) => {
        this.props.dispatch(loginAction.register(key, data)).then((res) => {
            if (res && res.success) {
                // window.location.href = 'https://www.baidu.com/';//跳转到后台
                message.success('注册成功！');
            } else {
                notification.error({
                    message: `注册：${res.message}`,
                    description: '',
                    duration: 3,
                });
            }
        });
    }

    render() {
        return (
            <div className="signup-container">
                <video
                    style={{ width: '100%', height: '100%', display: 'block' }}
                    height="100%"
                    playsInline
                    poster={`${require('./images/signup-poster.jpg')}`}
                    // preload="none"
                    loop
                    autoPlay
                    src={`${require('./video/signup-poster.mp4')}`}
                    type="video/mp4"
                />
                <Row
                    type="flex"
                    justify="space-between"
                    align="middle"
                >
                    <Col xs={24} sm={24} md={24} lg={16} xl={12} className="signup-form-container">
                        <Row>
                            <Col span={14} className="signup-info">
                                <div className="signup-title" >可再生能源技术转移中心</div>
                                <div className="signup-slogan">可再生能源，改变世界</div>
                                <p className="signup-desc">
                                    可再生能源转移中心账号支持技术申报、审核、专家入库、社区沟通等功能。实现可再生能源技术的高效转移。
                                </p>
                            </Col>
                            <Col span={10} className="signup-form">
                                {/* eslint-disable-next-line */}
                                <Tabs className="form" defaultActiveKey="1" onChange={key => this.getCaptcha()}>
                                    <Tabs.TabPane tab="个人账户" key="1">
                                        <Person
                                            formCheckRules={this.formCheckRules}
                                            captcha={this.state.getCaptcha}
                                            getCaptcha={this.getCaptcha}
                                            register={(data) => {
                                                this.register('1', data);
                                            }}
                                        />
                                    </Tabs.TabPane>
                                    <Tabs.TabPane tab="企业账户" key="2">
                                        <Company
                                            formCheckRules={this.formCheckRules}
                                            captcha={this.state.getCaptcha}
                                            getCaptcha={this.getCaptcha}
                                            register={(data) => {
                                                this.register('2', data);
                                            }}
                                        />
                                    </Tabs.TabPane>
                                </Tabs>
                                <div className="sign-switch">
                                    已有账号？
                                    <a href="/signin" onClick={event => {
                                        event.preventDefault();
                                        // eslint-disable-next-line
                                        this.props.history.push('/signin');
                                    }}>登录</a>
                                    <span className="ant-divider" />
                                    <a href="/help" onClick={event => {
                                        event.preventDefault();
                                        // eslint-disable-next-line
                                        this.props.history.push('/help');
                                    }}>帮助</a>
                                </div>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        );
    }
}

const mapStateToProps = () => {
    return {}
}

export default connect(mapStateToProps)(SignUp)